<template class='body'>
  <van-row class="main-menu">
    <van-nav-bar left-text="返回" title="问题跟踪查询" @click-left="doBack" />
    <div class="waiquanbox">
    <table>
      <tr>
        <td></td>
      </tr>
    </table>
      <div class="neiquanbox">
        <div class="demo-input-suffix">
          <div class="inputbox">
            发现方式：
              <el-input
              clearable
              size="small"
              class="searinputshu"
              placeholder="请输入内容"
              v-model="wtfxfs"
            >
            </el-input>
          </div>
          <div class="inputbox">
            单位名称：
            <el-select
              size="small"
              clearable
              v-model="dwmc"
              :disabled="datadisabled"
              placeholder="请选择"
              filterable
              allow-create
            >
              <el-option
                v-for="(item, i) in options.dwmc"
                :key="i"
                :value="item"
                :title="item"
              ></el-option>
            </el-select>
          </div>
          <div class="inputbox">
            部门名称：
            <el-input
              size="small"
              class="searinputshu"
              placeholder="请输入内容"
              v-model="bmmc"
            >
            </el-input>
          </div>
           <div class="inputbox">
            专业类别：
            <el-select
              clearable
              size="small"
              v-model="zylb"
              placeholder="请选择"
              filterable
              allow-create
            >
              <el-option
                v-for="(item, i) in options.zylb"
                :key="i"
                :value="item"
                :title="item"
              ></el-option>
            </el-select>
          </div>
          <div class="inputbox">
            业务事项：
            <el-select
              clearable
              size="small"
              v-model="ywsx"
              placeholder="请选择"
              filterable
              allow-create
            >
              <el-option
                v-for="(item, i) in options.ywsx"
                :key="i"
                :value="item"
                :title="item"
              ></el-option>
            </el-select>
          </div>
          <div class="inputbox">
            问题描述：
            <el-input
              size="small"
              class="searinputshu"
              placeholder="请输入内容"
              v-model="wtms"
            >
            </el-input>
          </div>
          <div class="inputbox">
            严重程度：
            <el-select
              clearable
              size="small"
              v-model="wtyzcd"
              placeholder="请选择"
              filterable
              allow-create
            >
              <el-option
                v-for="(item, i) in options.wtyzcd"
                :key="i"
                :value="item"
                :title="item"
              ></el-option>
            </el-select>
          </div>

          <div class="inputbox">
            问题发现人：
            <el-input
              size="small"
              class="searinputshu"
              placeholder="请输入内容"
              v-model="drman"
            >
            </el-input>
          </div>
          <div class="inputbox">
            责任人：
            <el-input
              size="small"
              class="searinputshu"
              placeholder="请输入内容"
              v-model="fzr"
            >
            </el-input>
          </div>
          <div class="inputbox">
            当前状态：
           <el-select clearable size="small" v-model="rectifyStatus" placeholder="请选择">
              <el-option
                v-for="item in liuChentypesix"
                :key="item.tyle"
                :label="item.label"
                :value="item.tyle">
              </el-option>
            </el-select>
          </div>
           <div class="inputbox">
            问题来源：
           <el-select clearable v-model="wtly" size="small" placeholder="请选择">
              <el-option
                v-for="item in wtlyoptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </div>
          <div class="inputbox wtfxsj">
            问题发现时间：
          <el-date-picker
            size="small"
            v-model="endstard"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
          </div>
          <div style="display:block;">
            <div class="inputbox right">
              <el-button
                type="primary"
                @click="getwtDatalist"
                icon="el-icon-search"
                >查询</el-button
              >
            </div>
            <div class="inputbox right">
              <el-button
                @click="repaly"
                >重置</el-button
              >
            </div>
            <div class="inputbox right">
              <!-- <el-button @click="exportExcel">导出表格</el-button> -->
              <el-button @click="setExportExcelall">导出表格</el-button>
            </div>
          </div>

        </div>

        <div class="tablecontent">
          <el-table
            @row-click="doShowDetail"
            v-loading="loading"
            :data="wentiData"
            stripe
            style="width: 100%;margin-top:30px;display: inline-block;height: 100%;overflow: scroll;"
          >
          <template slot="empty">
            <van-empty v-if="wentiData.length === 0" description="暂无数据" />
          </template>
           <el-table-column prop="person_name" label="账号（提单人）" width="180" v-if="!tablecolumm" key="1">
            </el-table-column>
            <el-table-column
              prop="px"
              label="排序"
              width="50"
              align="center"
              v-if="!tablecolumm"
              key="2"
            >

            <template slot-scope="scope">
                {{ scope.$index + 1 }}
            </template>
            </el-table-column>
            <el-table-column prop="wtfxfs" label="问题发现方式" width="180" key="3">
            </el-table-column>
            <el-table-column prop="wtfxsj" label="问题发现时间" width="150" key="19">
            </el-table-column>
            <el-table-column prop="dwmc" label="单位名称" width="100" key="4">
            </el-table-column>
            <el-table-column prop="bmmc" label="部门名称" width="180" key="5">
            </el-table-column>
            <!-- <el-table-column prop="zylb" label="专业类别" width="180" v-if="!tablecolumm" key="6">
            </el-table-column>
            <el-table-column prop="ywsx" label="业务事项（考核载体）" width="180" v-if="!tablecolumm" key="7">
            </el-table-column> -->
            <el-table-column prop="wtms" label="问题描述" min-width="400" key="8">
            </el-table-column>
            <el-table-column prop="gbyy" label="根本原因" width="150" key="9">
            </el-table-column>
            <!-- <el-table-column prop="sscm" label="所属层面" width="180" v-if="!tablecolumm" key="10">
            </el-table-column>
            <el-table-column prop="glhj" label="管理环节" width="180" v-if="!tablecolumm" key="11">
            </el-table-column>
            <el-table-column prop="lb" label="问题类别" width="180" v-if="!tablecolumm" key="12">
            </el-table-column>
            <el-table-column prop="dytxdy" label="对应体系单元" width="180" v-if="!tablecolumm" key="13">
            </el-table-column>
            <el-table-column prop="dytxys" label="对应体系要素" width="180" v-if="!tablecolumm" key="14"> 
            </el-table-column>-->
            <el-table-column prop="wtyzcd" label="问题严重程度" width="130" key="15">
            </el-table-column>
            <!-- <el-table-column prop="sfslwt" label="是否三老问题" width="180" v-if="!tablecolumm" key="16">
            </el-table-column>
            <el-table-column prop="sfzdbl" label="是否主动暴露" width="180" v-if="!tablecolumm" key="17">
            </el-table-column>
            <el-table-column prop="zgjy" label="整改建议" width="100" v-if="!tablecolumm" key="18">
            </el-table-column >
            <el-table-column prop="wtfxr" label="问题发现人" width="150" v-if="!tablecolumm" key="20">
            </el-table-column>
            <el-table-column prop="khbm" label="考核部门" width="150" v-if="!tablecolumm" key="21">
            </el-table-column> -->
            <el-table-column prop="fzr" label="责任人" width="100" key="22">
            </el-table-column>

 
            <el-table-column
              fixed="right"
              prop="id"
              label="流程"
              width="50"
              id="genzong"
              v-if="tablecolumm"
            >
              <template slot-scope="scope">
                <span @click.stop="genzongliucheng(scope.row.id,scope.row.rectify_status)">
                  <i class="el-icon-s-operation"></i>
                </span>
              </template>
            </el-table-column>
          </el-table>
          <div class="pagefanye right">
            <el-pagination
              @size-change="handleSizeChangeWenti"
              @current-change="handleCurrentChangeWenti"
              :current-page="currentPage"
              :page-sizes="[5, 10, 20, 40]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
            >
            </el-pagination>
          </div>
          <!-- 导出表格 -->
          <el-table
            :id="'mytable'"
            @row-click="doShowDetail"
            v-loading="loading"
            :data="allwentiData"
            stripe
            style="width: 100%;margin-top:30px;display: inline-block;height: 100%;overflow: scroll;display:none;"
          >
          <template slot="empty">
            <van-empty v-if="wentiData.length === 0" description="暂无数据" />
          </template>
           <el-table-column prop="person_name" label="账号（提单人）" width="180" v-if="!tablecolumm" key="1">
            </el-table-column>
            <el-table-column
              prop="px"
              label="排序"
              width="50"
              align="center"
              v-if="!tablecolumm"
              key="2"
            >

            <template slot-scope="scope">
                {{ scope.$index + 1 }}
            </template>
            </el-table-column>
            <el-table-column prop="wtfxfs" label="问题发现方式" width="180" key="3">
            </el-table-column>
            <el-table-column prop="dwmc" label="单位名称" width="100" key="4">
            </el-table-column>
            <el-table-column prop="bmmc" label="部门名称" width="180" key="5">
            </el-table-column>
            <el-table-column prop="zylb" label="专业类别" width="180" v-if="!tablecolumm" key="6">
            </el-table-column>
            <el-table-column prop="ywsx" label="业务事项（考核载体）" width="180" v-if="!tablecolumm" key="7">
            </el-table-column>
            <el-table-column prop="wtms" label="问题描述" min-width="400" key="8">
            </el-table-column>
            <el-table-column prop="gbyy" label="根本原因" width="150" key="9">
            </el-table-column>
            <el-table-column prop="sscm" label="所属层面" width="180" v-if="!tablecolumm" key="10">
            </el-table-column>
            <el-table-column prop="glhj" label="管理环节" width="180" v-if="!tablecolumm" key="11">
            </el-table-column>
            <el-table-column prop="lb" label="问题类别" width="180" v-if="!tablecolumm" key="12">
            </el-table-column>
            <el-table-column prop="dytxdy" label="对应体系单元" width="180" v-if="!tablecolumm" key="13">
            </el-table-column>
            <el-table-column prop="dytxys" label="对应体系要素" width="180" v-if="!tablecolumm" key="14">
            </el-table-column>
            <el-table-column prop="wtyzcd" label="问题严重程度" width="130" key="15">
            </el-table-column>
            <el-table-column prop="sfslwt" label="是否三老问题" width="180" v-if="!tablecolumm" key="16">
            </el-table-column>
            <el-table-column prop="sfzdbl" label="是否主动暴露" width="180" v-if="!tablecolumm" key="17">
            </el-table-column>
            <el-table-column prop="zgjy" label="整改建议" width="100" v-if="!tablecolumm" key="18">
            </el-table-column >
            <el-table-column prop="wtfxsj" label="问题发现时间" width="150" key="19">
            </el-table-column>
            <el-table-column prop="wtfxr" label="问题发现人" width="150" v-if="!tablecolumm" key="20">
            </el-table-column>
            <el-table-column prop="khbm" label="考核部门" width="150" v-if="!tablecolumm" key="21">
            </el-table-column>
            <el-table-column prop="fzr" label="责任人" width="100" key="22">
            </el-table-column>
          </el-table>
          <!-- 导出表格结束 -->
        </div>
      </div>
    </div>

    <el-drawer
      class="drawerHeight"
      title="跟踪流程"
      :visible.sync="drawer"
      :direction="direction"
      :size="size"
    >
      <div class="stepComponent">
        <div class="stepsTitle">
          <div style="float: left">审批流程及意见</div>
          <div class="tataltime" style="float:right;background:yellow;">{{TotalTime}}</div>
        </div>
        <div class="approvalProcess">
          <el-steps
            :active="active"
            finish-status="success"
            direction="vertical"
          >
            <el-step
              :title="item.label"
              v-for="item in onebuttwoBox"
              :id="item.id"
              ref="sort"
              :key="item.id"
            >
              <template slot="description">
                <div
                  class="step-row"
                >
                  <table
                    width="100%"
                    border="0"
                    cellspacing="0"
                    cellpadding="0"
                    class="processing_content"
                  >
                    <tr v-if="item.senate">
                      <td style="color: #98a6be">
                        <div
                          class="processing_content_detail"
                          style="float: left; width: 70%"
                        >
                          <span>审核人
                            <span style="color: #219aff">
                            {{item.senate.op_username}}
                            </span>提交了申请
                          </span
                          >
                        </div>
                        <div
                          class="processing_content_detail"
                          style="float: right"
                        >
                          <span><i class="el-icon-time"></i>{{
                              item.senate.op_datetime
                            }}</span
                          >
                        </div>
                      </td>
                    </tr>
                    <tr v-if="item.senate">
                      <td>
                        <div
                          class="processing_content_detail"
                          style="float: left; width: 70%"
                        >
                          <div
                            style="
                              float: left;
                              width: 2px;
                              height: 20px;
                              background: #c7d4e9;
                              margin-left: 10px;
                              margin-right: 10px;
                            "
                          ></div>
                          <span style="color: #919fb8">同意，建议通过</span>
                        </div>
                      </td>
                    </tr>
                  </table>
                </div>
              </template>
            </el-step>
          </el-steps>
          <!-- <el-button style="margin-top: 12px" @click="next">下一步</el-button> -->
        </div>
      </div>
    </el-drawer>
    <van-popup
      v-model="showPageRectifyDetail"
      position="right"
      get-container="body"
      style="width: 100%; height: 100%; background-color: #F9F9F9">
      <dealt-with-detail v-if="showPageRectifyDetail" :rectify="selectedRectify" @onCancel="showPageRectifyDetail = false" @onConfirm="doConfirm"/>
    </van-popup>
  </van-row>
</template>



<script>

import DealtWithDetail from '@/views/dealtwith/DealtWithDetail'
/* 下拉框的 默认值 */
import { zylb,ywsx, wtfxfs, dwmc,wtyzcd } from "../../utils/excel/option";
/* 导出 */
import {export_json_to_excel} from '../../../public/excel/Export2Excel';
import XLSX2 from "xlsx";
import XLSX from "xlsx-style";
/* 交互api */
import { getShujulist, getGenzong,QuestionDetails } from "../../api/dealtwith";
import { Loading } from "element-ui";
export default {
  components: { DealtWithDetail },
  data() {
    return {
      tablecolumm:true,
      showPageRectifyDetail: false,
      TotalTime:'',//总耗时
      datadisabled:false,
      size: document.body.clientWidth >= 950 ? '650px' : '70%', //抽屉宽度
      direction: "ltr", //抽屉展开反向
      active: 0,
      components: {},
      options: {
        //下拉框 选项
        wtfxfs: [], //问题发现 下拉框值
        dwmc: [], //单位名称
        zylb: [], //
        ywsx:[],
        wtyzcd:[]
      },
      liuChentypesix: [
        { id: "0",label: "未处理", tyle: "unprocess"},
        { id: "1", label: "待整改", tyle: "duty"},
        { id: "2", label: "指定整改措施(待审核)", tyle: "rectify"},
        { id: "3", label: "审核", tyle: "approve" },
        { id: "4", label: "落实", tyle: "commit" },
        { id: "5", label: "验收", tyle: "complete" },
      ],
      liuChentypeeight: [
        { id: "0", label: "未处理"},
        { id: "1", label: "制定部门(待整理)"},
        { id: "2", label: "制定整改措施和期限(待专业审核)"},
        { id: "3", label: "专业部门措施审核(待安监审核)"},
        { id: "4", label: "安监审核(待落实)"},
        { id: "5", label: "提交落实(待专业部门验收)"},
        { id: "6", label: "专业部门验收(待终验)"},
        { id: "7", label: "安监验收"},
      ],
       wtlyoptions: [
        {
          value: '公司',
          label: '公司发现问题'
        }, {
          value: '单位',
          label: '单位自查'
        } 
      ],
      wtly:'',
      onebuttwoBox:[], //接收数据
      onebuttwo:'', // 承接返回来是一级审核还是二级审核
      loading: false, //加载
      drawer: false,
      wtlb: "",
      searinput: "",
      drman:"",
      rectifyStatus:'', //流程状态
      tableHeight:'',//表格高度
      dwmc: "",
      bmmc: "",
      wtfxfs: "",
      zylb: "",
      ywsx:'',
      wtms: "",
      endstard:'',
      creattime: "",
      endtime: "",
      fzr:"",
      wtyzcd:"",
      wentiData: [
        // {
        //   date: "2016-05-02",
        //   name: "王小虎",
        //   address: "上海市普陀区金沙江路 1518 弄",
        // },
      ],
      allwentiData:[],
      currentPage: 1,   // 当前页码
      total: 0,   // 总条目数
      pageNum: 1, // 当前页码
      pageSize: 10, // 每页显示条数
    };
  },
  created() {
    this.options.dwmc = dwmc;//初始化下拉框 对应的值
    this.options.wtfxfs = wtfxfs;//初始化下拉框 对应的值
    this.options.zylb = zylb;//初始化下拉框 对应的值
    this.options.ywsx = ywsx;//初始化下拉框 对应的值
    this.options.wtyzcd = wtyzcd;//初始化下拉框 对应的值
    
        //获取部门
    this.dwmc = this.$store.state.authInfo.user.rectify[0].department_path.split('/')[1]
    this.dwmc = this.dwmc == undefined ? '':this.dwmc
    if(this.dwmc == '公司本部' ||  this.dwmc == ''){
      //this.dwmc = ''
      this.datadisabled = false;
    }else{
      this.datadisabled = true;
    }




  },
  mounted(){
    //this.tableHeight = window.innerHeight - 338 + "px"; //255即表格之外的固定高度
    this.getwtDatalist()
  },
  methods: {
    　//筛选方法，返回的是 true or false
    filterTag(value, row, column) {
      return row.tag === value;
    },
    doShowDetail (row) {
      console.log(row)
      this.loading = true;
      QuestionDetails({ opType : '1',checkType:row.wtlb == '公司' ? '0' : '1',problemId:row.id })
      .then((res) => {
        console.log(res);
        this.loading = false;
        this.selectedRectify = res.data.retData
        this.showPageRectifyDetail = true
      })
      .catch((err) => {
        this.loading = false;
        console.log("报错！！！！！！！！！！！");
      });

    },
    doConfirm () {
      this.showPageRectifyDetail = false
    },
    //重置
    repaly(){
      if(this.$store.state.authInfo.user.rectify[0].department_path.split('/')[1] == '公司本部' || this.dwmc == ''){
        this.dwmc = ''
      }
      this.drman= "",
      this.bmmc= "",
      this.rectifyStatus= "",
      this.wtfxfs= "",
      this.zylb="",
      this.ywsx="",
      this.wtms= "",
      this.endstard=""
      this.wtly=""
      this.wtyzcd=""
    },
     //导出
    exportExcel() {
      require.ensure([], () => {
        const tHeader = ['账号提单人','问题发现方式','单位名称','部门名称','专业类别','业务事项（考核载体）','问题描述', '根本原因','所属层面', '管理环节','问题类别','对应体系单元', '对应体系要素','问题严重程度','是否三老问题', '是否主动暴露','整改建议','问题发现时间','问题发现人','考核部门','责任人'] // 对应表格输出的中文title
        const filterVal = ['person_name','wtfxfs','dwmc' ,'bmmc', 'zylb','ywsx','wtms','gbyy','sscm',  'glhj','lb','dytxdy','dytxys','wtyzcd','sfslwt','sfzdbl','zgjy','wtfxsj','wtfxr','khbm','fzr'  ] // 对应表格输出的数据
        const list = this.wentiData // 表格data
        const data = this.formatJson(filterVal, list)
        export_json_to_excel(tHeader, data, '评分统计') // 对应下载文件的名字
          })
      },
      formatJson(filterVal, jsonData) {
          return jsonData.map(v => filterVal.map(j => v[j]))
      },
    //标签页
    handleClick(tab, event) {
      console.log(tab, event);
    },
    //问题列表
    handleSizeChangeWenti(val) {
      this.pageSize = val;
      this.getwtDatalist()
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChangeWenti(val) {
      this.pageNum = val;
      this.getwtDatalist()
      console.log(`当前页: ${val}`);
    },
    //查询
    getwtDatalist(alltao) {
      console.log(isNaN(alltao))
      console.log(alltao)
      console.log(this.endstard)
      let loadingInstance = Loading.service({ fullscreen: true });
      var obj = {};
      obj.drman = this.drman;
      obj.rectifyStatus = this.rectifyStatus;
      obj.dwmc = this.dwmc;
      obj.wtfxfs = this.wtfxfs;
      obj.zylb = this.zylb;
      obj.ywsx = this.ywsx;
      obj.wtms = this.wtms;
      obj.creattime = this.endstard[0];
      obj.endtime = this.endstard[1];
      obj.bmmc = this.bmmc;
      obj.wtlb = this.wtly
      obj.fzr = this.fzr
      obj.wtyzcd = this.wtyzcd
      obj.pageNum = this.pageNum,   // 当前页码
      obj.pageSize = isNaN(alltao) == false ? alltao :this.pageSize // 每页显示条数
      console.log(obj);
      getShujulist(obj)
        .then((res) => {
          loadingInstance.close();
          console.log(res);
          if (res.data.retData.list.length == 0) {
            this.$message({
              type: "warning",
              message: "暂无查询数据！",
            });
          }
          res.data.retData.list.forEach((item,i) => {
            if(item.rectify_status == 'complete'){
              res.data.retData.list[i].rectify_status = '已完成'
            }else if(item.rectify_status == 'unprocess' || item.rectify_status == '' || item.rectify_status == null ){
              res.data.retData.list[i].rectify_status = '未处理'
            }else{
              res.data.retData.list[i].rectify_status = '执行中'
            }
            // if(item.wtlb == '公司'){
            //  res.data.retData.list[i].wtfxfs = '公司' + res.data.retData.list[i].wtfxfs
            // }
          });
          if(isNaN(alltao) == false){
            this.allwentiData = res.data.retData.list;
            this.setExport2Excel()
          }else{
            this.wentiData = res.data.retData.list;
            this.total = res.data.retData.total  // 总条目数
            this.currentPage = res.data.retData.pageNum  // 当前页码
            this.pageSize = res.data.retData.pageSize  // 每页显示条数
          }




          //this.handleCurrentChangeWenti(1)//重置返回第一页
          //   this.loading = false;
          //   if (res.data.retData != null) {
          //     this.multipleSelections = res.data.retData;
          //   } else {
          //     this.$message({
          //       type: "warning",
          //       message: "当前没有录入数据,临时数据请点击打开查看",
          //     });
          //   }
        })
        .catch((err) => {});
    },
    //跟踪流程
    genzongliucheng(id,rectify_status) {
      console.log(rectify_status)
      getGenzong({ id: id })
        .then((res) => {
          console.log(res);

          this.onebuttwo = res.data.retData.oneortwo 
          

          // console.log(res.data.retData.genz.slice(0,1)[0].op_datetime)
          // console.log(res.data.retData.genz.slice(-1)[0].op_datetime)
          if(res.data.retData.genz.length != 0){
            this.TotalTime = '总耗时：' + this.getTime(res.data.retData.genz.slice(0,1)[0].op_datetime,res.data.retData.genz.slice(-1)[0].op_datetime)
          }
          for(var i = 0; i <= res.data.retData.genz.length; i++){
            //console.log(this.liuChentypeeight)
            if(res.data.retData.oneortwo == 1){
              for (var j = i + 1; j < res.data.retData.genz.length; j++) {
                  if (res.data.retData.genz[i].op_event == res.data.retData.genz[j].op_event) {
                      res.data.retData.genz.splice(j, 1);
                  }
              }
              if(rectify_status == '已完成' && res.data.retData.genz.length <= 8){
                this.liuChentypeeight[i+1].senate = res.data.retData.genz[i]
                this.onebuttwoBox = this.liuChentypeeight.slice(0,8)
                this.active = 8
              }else{
                this.liuChentypeeight[i+1].senate = res.data.retData.genz[i]
                this.onebuttwoBox = this.liuChentypeeight.slice(0,i+2)
                this.active = res.data.retData.genz.length == 0 ? 0 : res.data.retData.genz.length + 1
              }

            }else{
              for (var j = i + 1; j < res.data.retData.genz.length; j++) {
                  if (res.data.retData.genz[i].op_event == res.data.retData.genz[j].op_event) {
                      res.data.retData.genz.splice(j, 1);
                  }
              }
              if(rectify_status == '已完成' && res.data.retData.genz.length <= 6){
                this.liuChentypesix[i+1].senate = res.data.retData.genz[i]
                this.onebuttwoBox = this.liuChentypesix.slice(0,6)
                this.active = 6
              }else{
                this.liuChentypesix[i+1].senate = res.data.retData.genz[i]
                this.onebuttwoBox = this.liuChentypesix.slice(0,i+2)
                this.active = res.data.retData.genz.length == 0 ? 0 : res.data.retData.genz.length + 1
              }
            }
            console.log(this.onebuttwoBox )

          }


        })
        .catch((err) => {});
      this.drawer = true;
    },
    //耗时时间 结束时间-开头时间
    getTime (startime,endime) {
 startime = startime.replace(new RegExp("-","gm"),"/");//转换-变为/
    var start       = new Date(startime);
    var startYear   = start.getFullYear(); //开始年份
    var startMonth  = start.getMonth() + 1;//开始月份
    var startDay    = start.getDate();     //开始日期
    var startMiao   = start.getTime();
 
    endime = endime.replace(new RegExp("-","gm"),"/");  
    var end      = new Date(endime);
    var endYear  = end.getFullYear(); //结束年份
    var endMonth = end.getMonth() + 1;//结束月份
    var endDay   = end.getDate();     //结束日期
    var endMiao  = end.getTime();
 
    var years = 0;
    var months = endMonth - startMonth + (endYear - startYear) * 12;//总月
    if (endMonth * 100 + endDay < startMonth * 100 + startDay) {
        months--;//如果结束日期<输入日期，月数要-1
    }
    years = Math.floor(months / 12);//取整计算年数
    months = months % 12;//取余计算月数
    var middleDate = new Date(startime);//中间时间
    middleDate.setFullYear(startYear + years);//设置中间时间年份
    middleDate.setMonth(start.getMonth() + months);//设置中间时间月份
    var days =  Math.floor( ( endMiao- middleDate.getTime()) / 24 / 60/ 60 / 1000);//计算天数
 
    //时间差的毫秒数
    var chaTime=endMiao-startMiao;
    //计算出小时数
    var yu=chaTime % (24*3600*1000);//86400000
    var hour=Math.floor(yu/(3600*1000));//3600000
    //计算相差分钟数
    var yuH=chaTime % (3600*1000);
    var min=Math.floor(yuH/(60*1000));//60000
    //计算相差秒数
    var yuM=chaTime%(60*1000);
    var sec=Math.floor(yuM/1000);//1000
    var chastr = years+'年-'+months+'月-'+days+'天 '+hour+'时-'+min+'分-'+sec+'秒';
    console.log('相差时间：'+chastr);
    return chastr
    // return {year:years,month:months,day:days,hour:hour,minute:min,second:sec};


    },

      setExportExcelall(){
        this.getwtDatalist(this.total + '')
      },
      setExport2Excel() {
        this.tablecolumm = false
        /* generate workbook object from table */
        this.loading = true
        setTimeout(() => {
          var wb = XLSX2.utils.table_to_sheet(document.querySelector("#mytable"));//mytable为表格的id名
          // if(!wb['!merges']){
          //   this.$message.warning('无法导出：报表无数据');
          //   return
          // }
          console.log(wb)
          for(var i = 0;i<22;i++){
            wb["!cols"][i]={wpx:130}
          }
          // 样式的文档地址
          // https://www.npmjs.com/package/xlsx-style
          for (const key in wb) {
            if(key.indexOf('!') === -1&&wb[key].v){
            wb[key].s ={
              font:{//字体设置
                sz:13,
                bold:false,
                color:{
                  rgb:'000000'//十六进制，不带#
                  }
              },
              alignment:{//文字居中
                  horizontal:'center',
                vertical:'center',
                // wrap_text:true
                wrapText: 1,
                indent: 0
              },
              border: { // 设置边框
                top: { style: 'thin' },
                bottom: { style: 'thin' },
                left: { style: 'thin' },
                right: { style: 'thin' }
              }
            }
            }
          }
          var data = this.addRangeBorder(wb['!merges'],wb) //合并项添加边框
          console.log(data)
          var filedata = this.sheet2blob(data)
          console.log(filedata)
          this.openDownloadDialog(filedata, "问题查询.xlsx")
        }, 100);
        
      },
      //为合并项添加边框
      addRangeBorder(range,ws){
        let arr = ["A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z"];
        
        // range.forEach(item=>{
        //   let startColNumber = Number(item.s.r), endColNumber = Number(item.e.r);
        //   let startRowNumber = Number(item.s.c), endRowNumber = Number(item.e.c);
        //   const test = ws[arr[startRowNumber] + (startColNumber + 1)];
        //   for(let col = startColNumber ; col <= endColNumber ; col++)
        //   {
        //     for(let row = startRowNumber; row <= endRowNumber ; row++)
        //     {
        //       ws[arr[row] + (col + 1)] = test;
        //     }
        //   }
        // })
        return ws;
      },
      //将一个sheet转成最终的excel文件的blob对象，然后利用URL.createObjectURL下载
      sheet2blob(sheet, sheetName) {
        sheetName = sheetName || 'sheet1';
        var workbook = {
          SheetNames: [sheetName],
          Sheets: {}
        };
        workbook.Sheets[sheetName] = sheet; // 生成excel的配置项
      
        var wopts = {
          bookType: 'xlsx', // 要生成的文件类型
          bookSST: false, // 是否生成Shared String Table，官方解释是，如果开启生成速度会下降，但在低版本IOS设备上有更好的兼容性
          type: 'binary'
        };
        var wbout = XLSX.write(workbook, wopts);
        var blob = new Blob([s2ab(wbout)], {
          type: "application/octet-stream"
        }); // 字符串转ArrayBuffer
        function s2ab(s) {
          var buf = new ArrayBuffer(s.length);
          var view = new Uint8Array(buf);
          for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;
          return buf;
        }
        return blob;
      },
      openDownloadDialog(url, saveName) {
        console.log(url)
        console.log(saveName)
        this.loading = false
        this.tablecolumm = true
        if (typeof url == 'object' && url instanceof Blob) {
          url = URL.createObjectURL(url); // 创建blob地址
        }
        var aLink = document.createElement('a');
        aLink.href = url;
        aLink.download = saveName || ''; // HTML5新增的属性，指定保存文件名，可以不要后缀，注意，file:///模式下不会生效
        var event;
        if (window.MouseEvent) event = new MouseEvent('click');
        else {
          event = document.createEvent('MouseEvents');
          event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
        }
        aLink.dispatchEvent(event);

      },
    //步骤条
    next() {
      if (this.active++ > 4) this.active = 0;
    },
    doBack() {
      this.$router.back();
    },
  },
};
</script>

<style scoped lang="less">
body {
  background: #ccc;
  box-sizing: border-box;
}
.right {
  float: right;
}
.iconblue {
  color: #e2bd06;
}
.taptitle {
  font-size: 18px;
  padding: 10px 0;
  font-weight: bold;
}

.el-tabs__header {
  padding: 30px;
}
.iconsearch {
  color: #409eff !important;
}

.searinput {
  width: 250px;
}
.daoru {
  margin-left: 10px;
}
.pagefanye {
  margin-top: 10px;
}
.searinputshu {
  width: 150px;
}
.inputbox {
  margin-right: 20px;
  display: inline-block;
  margin-top: 20px;
}
.drawerHeight {
  /deep/.el-drawer__container > .el-drawer {
    overflow-y: auto !important;
  }
}
.tablecontent {
  /deep/.cell {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    height: 42.4px;
  }
}

.el-drawer.ltr {
  overflow-y: auto !important;
}
.stepComponent {
  padding: 10px 10px 10px 10px;
  margin: 10px 10px 10px 10px;
}
.stepsTitle {
  margin: 10px 0px 10px 10px;
}
.approvalProcess {
  color: #9eadc4;
  font-size: 14px;
  width: 100%;
  margin-left: 20px;
  margin-right: 0px;
  margin-top: 10px;
  float: left;
}
.processing_content {
  //background-color: #d9e5f9;
  box-sizing: border-box;
  padding: 4px;
}
.processing_content_detail {
  width: 137px;
  display: inline-block;
  box-sizing: border-box;
  padding-left: 5px;
}
.step-row {
  min-width: 500px;
  margin-bottom: 12px;
  margin-top: 12px;
}
   /deep/.el-pagination {
        white-space: normal;
    }
    /deep/.el-table .cell span{
      font-size: 27px;
    }
    /* 手机屏幕的字体大小 */
.neiquanbox .inputbox /deep/.el-input__inner{
  width: 150px;
}
.neiquanbox .wtfxsj /deep/.el-input__inner{
  width: unset;
}
</style>
